<template>
  <div>
    <el-form ref="studataForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-row gutter="15">
        <el-row gutter="15">
          <el-col :span="8">
            <el-form-item label="真实姓名" prop="stuName">
              <el-input v-model="formData.stuName" placeholder="请输入真实姓名" :maxlength="6" clearable
                        prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学号" prop="stuNumber">
              <el-input v-model="formData.stuNumber" placeholder="请输入学号" :maxlength="10" clearable
                        prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row gutter="15">
          <el-col :span="8">
            <el-form-item label="专业班级" prop="stuClass">
              <treeselect :disable-branch-nodes="true" v-model="formData.stuClass" :options="deptOptions" :show-count="true" placeholder="请选择专业班级" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入学时间" prop="stuBegintime">
              <el-date-picker type="datetime" v-model="formData.stuBegintime" format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd" :style="{width: '100%'}" placeholder="请选择入学时间入学时间入学时间入学时间入学时间"
                              clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="15">
          <el-col :span="8">
            <el-form-item label="身份证号" prop="stuIdnumber">
              <el-input v-model="formData.stuIdnumber" placeholder="请输入身份证号" :maxlength="18" clearable
                        prefix-icon='el-icon-coordinate' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="家庭住址" prop="stuHome">
              <el-input v-model="formData.stuHome" placeholder="请输入家庭住址" clearable
                        prefix-icon='el-icon-s-home' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="15">
          <el-col :span="8">
            <el-form-item label="微信号" prop="stuWechar">
              <el-input v-model="formData.stuWechar" placeholder="请输入微信号" clearable
                        prefix-icon='el-icon-chat-round' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="QQ号" prop="stuQq">
              <el-input v-model="formData.stuQq" placeholder="请输入QQ号" clearable prefix-icon='el-icon-eleme'
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="15">
          <el-col :span="6">
            <el-form-item label="证件照" prop="stuPhoto">
              <el-upload ref="stuPhoto" :file-list="stuPhotofileList" :action="stuPhotoAction"
                         :on-change="handleChangePic"
                         :auto-upload="false" :before-upload="BeforeUpload1" list-type="picture-card"
                         accept="image/*">
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">只能上传不超过 200KB 的image/*文件</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证（正）" prop="stuIdPhoto1">
              <el-upload ref="stuIdPhoto1" :file-list="stuIdPhoto1fileList" :action="stuIdPhoto1Action"
                         :on-change="handleChangePic"
                         :auto-upload="false" :before-upload="BeforeUpload2" list-type="picture-card"
                         accept="image/*">
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">只能上传不超过 200KB 的image/*文件</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证（反）" prop="stuIdPhoto2">
              <el-upload ref="stuIdPhoto2" :file-list="stuIdPhoto2fileList" :action="stuIdPhoto2Action"
                         :on-change="handleChangePic"
                         :auto-upload="false" :before-upload="BeforeUpload3" list-type="picture-card"
                         accept="image/*">
                <img src="stuIdPhoto2Action" alt="上传证件照">
                <div slot="tip" class="el-upload__tip">只能上传不超过 200KB 的image/*文件</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { deptTreeSelect } from "@/api/system/user";
  import { listData, updateData,stuphoto,stuidphoto1,stuidphoto2} from "@/api/studentssm/studata";
  import Treeselect from '@riophae/vue-treeselect';
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: {Treeselect},
    props: [],
    data() {
      return {
        formData: {
          stuName: undefined,
          stuNumber: undefined,
          stuBegintime: '2022-10-02',
          stuClass: undefined,
          stuIdnumber: undefined,
          stuHome: '',
          stuWechar: '',
          stuQq: ''
        },
        // 部门树选项
        deptOptions: undefined,
        //图片上传路径
        stuPhotoAction: '#',
        stuIdPhoto1Action: '#',
        stuIdPhoto2Action: '#',
        //图片文件
        stuPhoto: null,
        stuIdPhoto1: null,
        stuIdPhoto2: null,
        rules: {
          stuName: [{
            required: true,
            message: '请输入真实姓名',
            trigger: 'blur'
          }],
          stuNumber: [{
            required: true,
            message: '请输入学号',
            trigger: 'blur'
          }],
          stuBeginTime: [{
            required: true,
            message: '请选择入学时间',
            trigger: 'change'
          }],
          stuClass: [{
            required: true,
            message: '请选择专业班级',
            trigger: 'change'
          }],
          stuIdnumber: [{
            required: true,
            message: '请输入身份证号',
            trigger: 'blur'
          }],
          stuHome: [{
            required: true,
            message: '请输入家庭住址',
            trigger: 'blur'
          }],
          stuWechar: [{
            required: true,
            message: '请输入微信号',
            trigger: 'blur'
          }],
          stuQq: [{
            required: true,
            message: '请输入QQ号',
            trigger: 'blur'
          }]
        },
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getDeptTree();
    },
    mounted() {
    },
    methods: {
      submitForm() {
        this.$refs['studataForm'].validate(valid => {
          if (valid){// TODO 提交表单
            updateData(this.formData).then(response =>{
              this.$modal.msgSuccess("修改成功");
            })
            this.uploadImg1();
            this.uploadImg2();
            this.uploadImg3();
          }
        })
      },
      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data;
        });
      },
      resetForm() {
        this.$refs['studataForm'].resetFields()
      },
      BeforeUpload1(file) {
        this.stuPhoto=file;
        let isRightSize = file.size / 1024 < 200
        if (!isRightSize) {
          this.$message.error('文件大小超过 200KB')
        }
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/*类型的文件')
        }
        return isRightSize && isAccept
      },
      BeforeUpload2(file) {
        this.stuIdPhoto1 = file;
        let isRightSize = file.size / 1024 < 200
        if (!isRightSize) {
          this.$message.error('文件大小超过 200KB')
        }
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/*类型的文件')
        }
        return isRightSize && isAccept
      },
      BeforeUpload3(file) {
        this.stuIdPhoto2 = file;
        let isRightSize = file.size / 1024 < 200
        if (!isRightSize) {
          this.$message.error('文件大小超过 200KB')
        }
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/*类型的文件')
        }
        return isRightSize && isAccept
      },
      handleChangePic(file, fileList) {
        if (fileList.length > 1) {
          fileList.splice(0, 1)
          this.disable(true)
        }
      },
      // 上传图片
      uploadImg1() {
        this.$refs.cropper.getCropBlob(data => {
          let formData = new FormData();
          formData.append("photo", data.stuPhoto);
          stuphoto(formData).then(response => {
            this.stuPhotoAction = process.env.VUE_APP_BASE_API + response.imgUrl;
            store.commit('SET_AVATAR', this.options.img);
            this.$modal.msgSuccess("上传成功");
          });
        });
      },
      uploadImg2() {
        this.$refs.cropper.getCropBlob(data => {
          let formData = new FormData();
          formData.append("idphoto1", data.stuIdPhoto1);
          stuidphoto1(formData).then(response => {
            this.stuIdPhoto2Action = process.env.VUE_APP_BASE_API + response.imgUrl;
            store.commit('SET_AVATAR', this.options.img);
            this.$modal.msgSuccess("上传成功");
          });
        });
      },
      uploadImg3() {
        this.$refs.cropper.getCropBlob(data => {
          let formData = new FormData();
          formData.append("idphoto2", data.stuIdPhoto2);
          stuidphoto2(formData).then(response => {
            this.stuIdPhoto1Action = process.env.VUE_APP_BASE_API + response.imgUrl;
            store.commit('SET_AVATAR', this.options.img);
            this.$modal.msgSuccess("上传成功");
          });
        });
      }
    }
  }

</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }

</style>
